<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalay的主页</title>

    <!--引入初始化样式文件base.css-->
    <link rel="stylesheet" href="css/base.css">
    <!--引入首页专有模块样式文件index.css-->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <header>
        Kalay的空间主页
    </header>

    <!--focus部分-->
    <div class="focus w">
        <img src="images/focus.png" alt="">
        <a href="#">DISCOVER MORE</a>
    </div>

    <!--nav部分-->
    <nav class="nav w">
        <div class="title">
            <h2>what things i am doing...</h2>
            <p>Lorem ipsum dolor sit amet,consectetur venenatis tincidunt.</p>
        </div>
        <ul>
            <li>
                <a href="#">
                    <div class="pic_1"></div>
                    <h3>Graphic Design</h3>
                    <p>Lorem ipsum dolor sit amet,consectetur adipiscing morbi venenatis</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic_2"></div>
                    <h3>Photography</h3>
                    <p>Duis sed arcu sed nunc maximus tempor. Maecenas ot enim laoroot pharetra risus vel</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic_3"></div>
                    <h3>UI/UX Design</h3>
                    <p>Sed tristique, nunc sit amet pellentesque pharetra, sapien urna.</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic_4"></div>
                    <h3>illustration</h3>
                    <p>Cras ut urna quis nisi luctus molestie tincidunt sed ipsum. Donec gravida laoreet erat.</p>
                </a>
            </li>
        </ul>
    </nav>

    <!--了解更多部分-->
    <div class="more w">
        <img src="images/life.jpg" alt="">
        <div>
            <div class="text">
                <h2>a little more about Kalay</h2>
                <p class="first">Graphic Designer, Creative Photographer & Front-end Developer</p>

                <p> Praesent eleifend tristique nisl, nec finibus urna posuere nec. Quisque vel nunc eget
                    arcu maximus
                    facilisis non eu nisi. Aliquam ullamcorper est a nisl imperdiet luctus.</p>

                <p class="last"> Sed sed convallis odio. Nulla scelerisque libero efficitur diam fermentum, quis
                    tincidunt urna
                    placerat Maecenas sed tortor sed nisi semper ultricies. Nulla ornare metus in massa mollis
                    scelerisque.
                </p>
            </div>
        </div>
        <div style="clear: both;"></div>
        <ul class="sign">
            <li>
                <a href="#"><img src="images/sign_1.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="images/sign_2.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="images/sign_3.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="images/sign_4.png" alt=""></a>
            </li>
        </ul>
    </div>

    <!--select部分-->
    <div class="select w">
        <div class="title">
            <h2>Selected Designs</h2>
            <p>Lorem ipsum dolor sit amet,consectetur venenatis tincidunt.</p>
        </div>
        <ul>
            <li>
                <a href="#">
                    <img src="images/design_1.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/design_2.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/design_3.png" alt="">
                </a>
            </li>


        </ul>
    </div>

    <!--注册部分-->
    <div class="register w">
        <div class="title">
            <h2>Get in touch</h2>
            <p>Lorem ipsum dolor sit amet,consectetur venenatis tincidunt.</p>
        </div>

        <div class="content">
            <form action="">
                <input type="text" placeholder="Name" required="required">
                <input type="email" placeholder="Email" required="required">
                <textarea name="" id="" cols="30" rows="10" placeholder="Message"></textarea>
                <input type="submit" value="Send Message" class="finish"></li>
            </form>

            <div class="contact">
                <div class="phone">
                    <h2>Get in touch</h2>
                    <p>Lorem ipsum dolor sit consectetur adipiscing morbi venenatis et tortor consectetur adipiscing
                        lacinia tortor morbi ultricies.</p>
                    <ul>
                        <li>
                            <img src="images/position.png" alt="">
                            <p>456 New Street 22000,New York City.USA</p>
                        </li>
                        <li>
                            <img src="images/message.png" alt="">
                            <p>info@company.com</p>
                        </li>
                        <li>
                            <img src="images/phone.png" alt="">
                            <p>010-020-0340</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!--底部部分-->
    <footer class="w">
        <p>Copyright © 2017 Your Company | Design:Tooplate</p>
        <ul>
            <li><img src="images/sign_1.png" alt=""></li>
            <li><img src="images/sign_2.png" alt=""></li>
            <li><img src="images/sign_3.png" alt=""></li>
            <li><img src="images/sign_4.png" alt=""></li>
            <li><img src="images/sign_5.png" alt=""></li>
        </ul>
    </footer>
</body>

</html>